<div>
  <nz-modal
    nzWidth="800px"
    (nzAfterOpen)="reset()"
    [nzClosable]="false"
    nzWrapClassName="vertical-center-modal"
    [nzContent]="modalContent"
    [nzOkText]="null"
    [(nzVisible)]="visiable" nzTitle="Select ${TableName}" (nzOnCancel)="handleCancel()" >
    <ng-template #modalContent>
<div >
  <div class="form-group form-inline">
    <#list  columns as field>

      <#if field.jsType=="string">
        <input [(ngModel)]="queryParam.${field.columnName!}" class="form-control" type="text" name="${field.columnName!}" placeholder="search by ${field.columnName!}"
               (keyup.enter)="doSearch()" />
      </#if>

    </#list>
  </div>

</div>
<nz-table #dataTable
          [nzLoading]="table.loading"
          [nzData]="table.dataSet"
          [nzFrontPagination]="false"
          [nzPageIndex]="table.page.pageIndex"
          [nzPageSize]="table.page.pageSize"
          [nzTotal]="table.page.total"
          (nzPageIndexChange)="pageChange($event)"
          nzSize="small"
          class="mb-4"
>

  <thead>
  <tr>
    <#list  columns as field>
      <th>${field.COLUMNNAME!}</th>
    </#list>
    <th>ACTION</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of dataTable.data">
    <#list  columns as field>
      <td>{{item.${field.columnName!}}}</td>
    </#list>
    <td>
      <button
        (click)="handleOk(item)"
        nz-button nzType="default" >Select</button>
    </td>
  </tr>
  </tbody>
</nz-table>
    </ng-template>
  </nz-modal>
</div>
